<template>
  <div class="all">
    <div class="header">
      <div style="width: 80px">
        <img
          src="@/assets/gou.png"
          alt=""
          width="18px"
          height="20px"
          v-if="role == 1"
          @click="goCan"
        />
      </div>
      <div class="title">个人中心</div>
      <div class="change" style="width: 80px" @click="changerole">
        <div><van-icon name="sort" />切换身份</div>
      </div>
    </div>
    <!-- <div class="unlogin" v-show="!id">
      <div class="info">
        <div class="lbox">
          <img src="../../assets/logo.png" alt="" />
        </div>
        <div @click="tologin" class="bbox">登录/注册</div>
      </div>
      <div class="tool">
        <div class="tip">未注册您仅可以使用以下功能</div>
        <div @click="tologin" class="cell">
          <img src="../../assets/me13.png" alt="" />
          <span>业主估价</span>
          <div style="flex: 1"></div>
          <van-icon name="arrow" />
        </div>
        <div @click="tologin" class="cell">
          <img src="../../assets/me15.png" alt="" />
          <span>查价格</span>
          <div style="flex: 1"></div>
          <van-icon name="arrow" />
        </div>
        <div @click="tologin" class="cell">
          <img src="../../assets/me16.png" alt="" />
          <span>房贷计算</span>
          <div style="flex: 1"></div>
          <van-icon name="arrow" />
        </div>
      </div>
      <div class="tool tool2">
        <div class="tip">注册登录享更多定制服务</div>
        <div @click="tologin" class="cell">
          <img src="../../assets/me17.png" alt="" />
          <span>新房优惠</span>
          <div style="flex: 1"></div>
          <van-icon name="arrow" />
        </div>
      </div>
    </div> -->
    <div v-show="role === 0" class="renterandbuy">
      <div class="info">
        <div class="lbox">
          <div style="width: 63px" />
          <div>
            <img :src="avatar" alt="" />
          </div>
          <div>
            <img src="../../assets/mename.png" alt="" /><span>默认</span>
          </div>
        </div>
        <div class="bbox">{{ username }}</div>
      </div>
      <div class="card">
        <div class="see">
          <span>我的现金（元）</span>
        </div>
        <div class="out">
          <span class="moeny">&yen;&nbsp;{{ withdrawAmount }}</span>
          <button class="tixian" type="info" @click="jumptomoney">提现</button>
        </div>
      </div>
      <div class="tool">
        <div class="tip">我的工具</div>
        <div class="cell" @click="jumptotoday">
          <img src="../../assets/me07.png" alt="" />
          <span>今日浏览</span>
          <div style="flex: 1" />
          <van-icon name="arrow" />
        </div>
        <div class="cell" @click="jumptopushhouse">
          <img src="../../assets/me09.png" alt="" />
          <span>匹配房源</span>
          <div style="flex: 1" />
          <van-icon name="arrow" />
        </div>
        <div class="cell" @click="jumptoserviceorderbuy">
          <img src="../../assets/me08.png" alt="" />
          <span>服务订单</span>
          <div style="flex: 1" />
          <van-icon name="arrow" />
        </div>
        <div class="cell" @click="jumptocomplaint">
          <img src="../../assets/me03.png" alt="" />
          <span>投诉</span>
          <div style="flex: 1" />
          <van-icon name="arrow" />
        </div>
        <div class="cell" @click="jumptolist">
          <img src="../../assets/me04.png" alt="" />
          <span>黑名单</span>
          <div style="flex: 1" />
          <van-icon name="arrow" />
        </div>
        <div class="cell" @click="jumptoset">
          <img src="../../assets/me05.png" alt="" />
          <span>个人设置</span>
          <div style="flex: 1" />
          <van-icon name="arrow" />
        </div>
        <div class="cell" @click="call">
          <img src="../../assets/me06.png" alt="" />
          <span>联系我们</span>
          <div style="flex: 1" />
          <van-icon name="arrow" />
        </div>
        <div class="cell" @click="goTui">
          <img src="../../assets/share2.png" alt="" />
          <span>随手分享App 立即赚钱</span>
          <div style="flex: 1" />
          <van-icon name="arrow" />
        </div>
        <!-- <div class="cell" @click="goTui">
          <img src="../../assets/er.png" alt="" />
          <span>推广</span>
          <div style="flex: 1" />
          <van-icon name="arrow" />
        </div> -->
      </div>
    </div>
    <div v-show="role === 1" class="renterandbuy">
      <div class="info">
        <div class="lbox">
          <div style="width: 63px" />
          <div>
            <img :src="avatar" alt="" />
          </div>
          <div>
            <img src="../../assets/mename.png" alt="" /><span>租客</span>
          </div>
        </div>
        <div class="bbox">{{ username }}</div>
      </div>
      <div class="card">
        <div class="see">
          <span style="font-size: 13px">我的积分</span>
          <van-icon
            name="arrow"
            size="16px"
            class="icon"
            @click="jumptoGetIntegral"
          />
        </div>
        <div class="out">
          <span class="moeny" style="font-size: 24px">{{ integral }}</span>
          <button class="tixian btn" type="info" @click="jumptoGetIntegral">
            获取积分
          </button>
        </div>
        <!-- <div class="buyserve">
          <div class="leftbox">
            <div class="chone">
              信息服务次数：<span>{{ contactLandlordNum }}次</span>
            </div>
          </div>
          <div class="rightbox">
            <div @click="jumptoservicebuylx" class="buy">购买</div> -->
        <!-- <div v-show="commitenum == 0" @click="jumptoservicebuylx" class="buy">
            购买
          </div>
          <div v-show="commitenum != 0" class="forback">退款</div> -->
        <!-- </div>
        </div> -->
      </div>
      <div class="tool">
        <div class="tip">我的工具</div>
        <div class="cell" @click="jumptotoday">
          <img src="../../assets/me07.png" alt="" />
          <span>今日浏览</span>
          <div style="flex: 1" />
          <van-icon name="arrow" />
        </div>
        <div class="cell" @click="jumptopushhouse">
          <img src="../../assets/me09.png" alt="" />
          <span>匹配房源</span>
          <div style="flex: 1" />
          <van-icon name="arrow" />
        </div>
        <div class="cell" @click="jumptointegral">
          <img src="../../assets/jifen.png" alt="" />
          <span>服务订单</span>
          <div style="flex: 1" />
          <van-icon name="arrow" />
        </div>
        <div class="cell" @click="jumptocomplaint">
          <img src="../../assets/me03.png" alt="" />
          <span>投诉</span>
          <div style="flex: 1" />
          <van-icon name="arrow" />
        </div>
        <div class="cell" @click="jumptolist">
          <img src="../../assets/me04.png" alt="" />
          <span>黑名单</span>
          <div style="flex: 1" />
          <van-icon name="arrow" />
        </div>
        <div class="cell" @click="jumptoset">
          <img src="../../assets/me05.png" alt="" />
          <span>个人设置</span>
          <div style="flex: 1" />
          <van-icon name="arrow" />
        </div>
        <div class="cell" @click="call">
          <img src="../../assets/me06.png" alt="" />
          <span>联系我们</span>
          <div style="flex: 1" />
          <van-icon name="arrow" />
        </div>
        <div class="cell" @click="goTui">
          <img src="../../assets/share2.png" alt="" />
          <span>随手分享App 立即赚钱</span>
          <div style="flex: 1" />
          <van-icon name="arrow" />
        </div>
      </div>
    </div>
    <div v-show="role === 2" class="rentowner">
      <div class="info">
        <div class="lbox">
          <div style="width: 63px" />
          <div>
            <img :src="avatar" alt="" />
          </div>
          <div>
            <img src="../../assets/mename.png" alt="" /><span>房东</span>
          </div>
        </div>
        <div class="bbox">{{ username }}</div>
      </div>
      <div class="card">
        <div class="see">
          <span>我的现金（元）</span>
        </div>
        <div class="out">
          <span class="moeny">&yen;&nbsp;{{ withdrawAmount }}</span>
          <button class="tixian" type="info" @click="jumptomoney">提现</button>
        </div>
      </div>
      <div class="tool">
        <div class="tip">我的工具</div>
        <div class="cell" @click="jumptotoday">
          <img src="../../assets/me07.png" alt="" />
          <span>今日浏览</span>
          <div style="flex: 1" />
          <van-icon name="arrow" />
        </div>
        <div class="cell" @click="jumptomyhouse">
          <img src="../../assets/me11.png" alt="" />
          <span>我的房源</span>
          <div style="flex: 1" />
          <van-icon name="arrow" />
        </div>
        <div class="cell" @click="jumptopushguest">
          <img src="../../assets/me19.png" alt="" />
          <span>匹配租客</span>
          <div style="flex: 1" />
          <van-icon name="arrow" />
        </div>
        <div class="cell" @click="jumptocomplaint">
          <img src="../../assets/me03.png" alt="" />
          <span>投诉</span>
          <div style="flex: 1" />
          <van-icon name="arrow" />
        </div>
        <div class="cell" @click="jumptolist">
          <img src="../../assets/me04.png" alt="" />
          <span>黑名单</span>
          <div style="flex: 1" />
          <van-icon name="arrow" />
        </div>
        <div class="cell" @click="jumptoset">
          <img src="../../assets/me05.png" alt="" />
          <span>个人设置</span>
          <div style="flex: 1" />
          <van-icon name="arrow" />
        </div>
        <div class="cell" @click="call">
          <img src="../../assets/me06.png" alt="" />
          <span>联系我们</span>
          <div style="flex: 1" />
          <van-icon name="arrow" />
        </div>
        <div class="cell" @click="goTui">
          <img src="../../assets/share2.png" alt="" />
          <span>随手分享App 立即赚钱</span>
          <div style="flex: 1" />
          <van-icon name="arrow" />
        </div>
        <!-- <div class="cell" @click="goTui">
          <img src="../../assets/er.png" alt="" />
          <span>推广</span>
          <div style="flex: 1" />
          <van-icon name="arrow" />
        </div> -->
      </div>
    </div>
    <div v-if="role === 3" class="owner">
      <div class="info">
        <div class="lbox">
          <div style="width: 63px" />
          <div>
            <img :src="avatar" alt="" />
          </div>
          <div>
            <img src="../../assets/mename.png" alt="" /><span>业主</span>
          </div>
        </div>
        <div class="bbox">{{ username }}</div>
      </div>
      <div class="card">
        <div class="see">
          <span>我的现金（元）</span>
        </div>
        <div class="out">
          <span class="moeny">&yen;&nbsp;{{ withdrawAmount }}</span>
          <button class="tixian" type="info" @click="jumptomoney">提现</button>
        </div>
      </div>
      <div class="tool">
        <div class="tip">我的工具</div>
        <div class="cell" @click="jumptotoday">
          <img src="../../assets/me07.png" alt="" />
          <span>今日浏览</span>
          <div style="flex: 1" />
          <van-icon name="arrow" />
        </div>
        <div class="cell" @click="jumptomyownerhouse">
          <img src="../../assets/me09.png" alt="" />
          <span>我的房源</span>
          <div style="flex: 1" />
          <van-icon name="arrow" />
        </div>
        <!-- <div class="cell" @click="jumptomyagent">
          <img src="../../assets/me10.png" alt="" />
          <span>我的经纪人</span>
          <div style="flex: 1" />
          <van-icon name="arrow" />
        </div> -->
        <div class="cell" @click="jumptocomplaint">
          <img src="../../assets/me03.png" alt="" />
          <span>投诉</span>
          <div style="flex: 1" />
          <van-icon name="arrow" />
        </div>
        <div class="cell" @click="jumptolist">
          <img src="../../assets/me04.png" alt="" />
          <span>黑名单</span>
          <div style="flex: 1" />
          <van-icon name="arrow" />
        </div>
        <div class="cell" @click="jumptoset">
          <img src="../../assets/me05.png" alt="" />
          <span>个人设置</span>
          <div style="flex: 1" />
          <van-icon name="arrow" />
        </div>
        <div class="cell" @click="call">
          <img src="../../assets/me06.png" alt="" />
          <span>联系我们</span>
          <div style="flex: 1" />
          <van-icon name="arrow" />
        </div>
        <div class="cell" @click="goTui">
          <img src="../../assets/share2.png" alt="" />
          <span>随手分享App 立即赚钱</span>
          <div style="flex: 1" />
          <van-icon name="arrow" />
        </div>
        <!-- <div class="cell" @click="goTui">
          <img src="../../assets/er.png" alt="" />
          <span>推广</span>
          <div style="flex: 1" />
          <van-icon name="arrow" />
        </div> -->
      </div>
    </div>
    <div v-show="role === 4" class="agent">
      <div class="info">
        <div class="leftbox">
          <div><img :src="agent.agentAvatar" alt="" /></div>
          <div>{{ username }}</div>
          <div>
            <img src="../../assets/mename.png" alt="" /><span>经纪人</span>
          </div>
          <img
            v-show="agent.vip == 2"
            class="vip"
            src="../../assets/V.png"
            alt=""
          />
        </div>
        <div class="rightbox">
          <div>平台服务编号:{{ agent.agentSn }}</div>
          <div>入驻平台时间:{{ agent.time }}</div>
          <div>服务订单数量:{{ agent.trustNum }}个</div>
          <div>
            服务质量星级:
            <van-rate
              v-model="value"
              :size="14"
              color="#ffd21e"
              void-color="#fff"
              readonly
            />
          </div>
        </div>
      </div>
      <div class="jingcard">
        <div class="top">
          <div>
            <div>我的现金（元）</div>
            <div>
              ￥{{ withdrawAmount }}
              <van-icon
                name="arrow"
                size="12px"
                class="icon"
                @click="jumptomoney"
              />
            </div>
          </div>
          <div>
            <button @click="jumptomoney">提 现</button>
          </div>
        </div>
        <div class="bottom">
          <div @click="showque1">
            <div class="up">0.00</div>
            <div class="und">待结算佣金</div>
          </div>
          <div>
            <div class="up">{{ agent.cautionMoney }}.00</div>
            <div class="und">服务保证金(元)</div>
          </div>
          <div>
            <div class="up">{{ integral }}</div>
            <div class="und">我的积分(个)</div>
          </div>
        </div>
      </div>
      <div class="getorder">
        <img
          class="getorderimg"
          src="../../assets/getorder.png"
          alt=""
          @click="jumptograborder"
        />
        <div class="li" @click="jumptograborder">
          <div>立即</div>
          <div>前往</div>
        </div>
      </div>
      <div class="tool">
        <div class="tip">我的工具</div>
        <!-- <div class="cell" @click="goBuyAgent" v-if="agentVip==1">
          <img src="../../assets/coin.png" alt="" />
          <span>成为会员</span>
          <div style="flex: 1" />
          <van-icon name="arrow" />
        </div> -->
        <div class="cell" @click="jumptomybuyhouse">
          <img src="../../assets/me11.png" alt="" />
          <span>我的房源</span>
          <div style="flex: 1" />
          <van-icon name="arrow" />
        </div>
        <div class="cell" @click="goMoney" v-if="agentVip == 1">
          <img src="../../assets/money.png" alt="" />
          <span>会员入驻(搞钱秘籍)</span>
          <div style="flex: 1" />
          <van-icon name="arrow" />
        </div>
        <div class="cell" @click="jumptoserviceorderagent">
          <img src="../../assets/me12.png" alt="" />
          <span>服务订单</span>
          <div style="flex: 1" />
          <van-icon name="arrow" />
        </div>
        <div class="cell" @click="getCustomer">
          <img src="../../assets/jiantou.png" alt="" />
          <span>全网获客</span>
          <img
            src="../../assets/fire.png"
            alt=""
            style="width: 10px; height: 10px; transform: translateY(-5px)"
          />
          <div style="flex: 1" />
          <van-icon name="arrow" />
        </div>
        <div class="cell" @click="jumptocomplaint">
          <img src="../../assets/me03.png" alt="" />
          <span>投诉</span>
          <div style="flex: 1" />
          <van-icon name="arrow" />
        </div>
        <div class="cell" @click="jumptolist">
          <img src="../../assets/me04.png" alt="" />
          <span>黑名单</span>
          <div style="flex: 1" />
          <van-icon name="arrow" />
        </div>
        <div class="cell" @click="jumptoset">
          <img src="../../assets/me05.png" alt="" />
          <span>个人设置</span>
          <div style="flex: 1" />
          <van-icon name="arrow" />
        </div>
        <div class="cell" @click="call">
          <img src="../../assets/me06.png" alt="" />
          <span>联系我们</span>
          <div style="flex: 1" />
          <van-icon name="arrow" />
        </div>
        <div class="cell" @click="goTui">
          <img src="../../assets/share2.png" alt="" />
          <span>随手分享App 立即赚钱</span>
          <div style="flex: 1" />
          <van-icon name="arrow" />
        </div>
        <!-- <div class="cell" @click="goTui">
          <img src="../../assets/er.png" alt="" />
          <span>推广</span>
          <div style="flex: 1" />
          <van-icon name="arrow" />
        </div> -->
      </div>
    </div>
    <div v-show="role === 5" class="renterandbuy">
      <div class="info">
        <div class="lbox">
          <div style="width: 63px" />
          <div>
            <img :src="avatar" alt="" />
          </div>
          <div>
            <img src="../../assets/mename.png" alt="" /><span>买家</span>
          </div>
        </div>
        <div class="bbox">{{ username }}</div>
      </div>
      <div class="card cardmai">
        <div class="see">
          <div style="font-size: 13px">带看次数</div>
          <div>{{ count }}</div>
        </div>
        <van-icon name="arrow" size="16px" class="icon" @click="jumptoDai" />
        <div class="see">
          <div style="font-size: 13px">直联直买次数</div>
          <div>{{ contactOwnerNum }}</div>
        </div>
        <van-icon name="arrow" size="16px" class="icon" @click="jumptoZhi" />
        <!-- <div class="out">
          <span class="moeny" style="font-size: 24px">{{ count }}</span>
          <button class="tixian btn" type="info" @click="jumptoDai">
            获取次数
          </button>
        </div> -->
        <!-- <div class="buyserve">
          <div class="leftbox">
            <div class="chone">
              信息服务次数：<span>{{ contactLandlordNum }}次</span>
            </div>
          </div>
          <div class="rightbox">
            <div @click="jumptoservicebuylx" class="buy">购买</div> -->
        <!-- <div v-show="commitenum == 0" @click="jumptoservicebuylx" class="buy">
            购买
          </div>
          <div v-show="commitenum != 0" class="forback">退款</div> -->
        <!-- </div>
        </div> -->
      </div>
      <div class="tobuyserve">
        <swiper class="swiper" :options="swiperOption">
          <swiper-slide>
            <div
              style="background-color: #fff8f0; border: 1px solid #ffeac3"
              class="item"
            >
              <div style="background-color: #f4ac26">直买服务包</div>
              <div>直连单个业主</div>
              <div>不限次</div>
              <div
                style="background-color: #f4ac26"
                @click="jumptoservicebuyzm"
              >
                购买
              </div>
            </div>
          </swiper-slide>
          <swiper-slide>
            <div
              style="background-color: #faf4ff; border: 1px solid #ebd4ff"
              class="item"
            >
              <div style="background-color: #b187d4">带看服务包</div>
              <div>随心增减</div>
              <div>还有VIP可选</div>
              <div
                style="background-color: #b187d4"
                @click="jumptoservicebuydk"
              >
                购买
              </div>
            </div>
          </swiper-slide>
          <swiper-slide>
            <div
              style="background-color: #f2fffa; border: 1px solid #cee2ed"
              class="item"
            >
              <div style="background-color: #5dc399">交易服务包</div>
              <div>交易信息透明</div>
              <div>流程清晰安全</div>
              <div
                style="background-color: #5dc399"
                @click="jumptoservicebuyjy"
              >
                购买
              </div>
            </div>
          </swiper-slide>
          <swiper-slide>
            <div
              style="background-color: #f2faff; border: 1px solid #b7e5ff"
              class="item"
            >
              <div style="background-color: #47aae2">金融服务包</div>
              <div>协助贷款办理</div>
              <div>资料流程管理</div>
              <div
                style="background-color: #47aae2"
                @click="jumptoservicebuyjr"
              >
                购买
              </div>
            </div>
          </swiper-slide>
          <swiper-slide>
            <div
              style="background-color: #fff5f5; border: 1px solid #f4d1d0"
              class="item"
            >
              <div style="background-color: #d43b33">交割服务包</div>
              <div>协助物业交割</div>
              <div>顺利安心入住</div>
              <div
                style="background-color: #d43b33"
                @click="jumptoservicebuyjg"
              >
                购买
              </div>
            </div>
          </swiper-slide>
        </swiper>
      </div>
      <div class="tool">
        <div class="tip">我的工具</div>
        <div class="cell" @click="jumptotoday">
          <img src="../../assets/me07.png" alt="" />
          <span>今日浏览</span>
          <div style="flex: 1" />
          <van-icon name="arrow" />
        </div>
        <div class="cell" @click="jumptopushhouse">
          <img src="../../assets/me09.png" alt="" />
          <span>匹配房源</span>
          <div style="flex: 1" />
          <van-icon name="arrow" />
        </div>
        <div class="cell" @click="jumptoserviceorderbuy">
          <img src="../../assets/me08.png" alt="" />
          <span>服务订单</span>
          <div style="flex: 1" />
          <van-icon name="arrow" />
        </div>
        <div class="cell" @click="jumptocomplaint">
          <img src="../../assets/me03.png" alt="" />
          <span>投诉</span>
          <div style="flex: 1" />
          <van-icon name="arrow" />
        </div>
        <div class="cell" @click="jumptolist">
          <img src="../../assets/me04.png" alt="" />
          <span>黑名单</span>
          <div style="flex: 1" />
          <van-icon name="arrow" />
        </div>
        <div class="cell" @click="jumptoset">
          <img src="../../assets/me05.png" alt="" />
          <span>个人设置</span>
          <div style="flex: 1" />
          <van-icon name="arrow" />
        </div>
        <div class="cell" @click="call">
          <img src="../../assets/me06.png" alt="" />
          <span>联系我们</span>
          <div style="flex: 1" />
          <van-icon name="arrow" />
        </div>
        <div class="cell" @click="goTui">
          <img src="../../assets/share2.png" alt="" />
          <span>随手分享App 立即赚钱</span>
          <div style="flex: 1" />
          <van-icon name="arrow" />
        </div>
        <!-- <div class="cell" @click="goTui">
          <img src="../../assets/er.png" alt="" />
          <span>推广</span>
          <div style="flex: 1" />
          <van-icon name="arrow" />
        </div> -->
      </div>
    </div>
    <van-overlay :show="show" @click="show = false">
      <div ref="qrcodeDom" class="erwei"></div>
    </van-overlay>
  </div>
</template>

<script>
import {
  getSecret,
  getUserId,
  getInitialize,
  getChooseCity,
} from "@/utils/auth";
import { mapGetters } from "vuex";
import { _local, _session } from "@/utils/storage";
import { getUserInfo, shareLink } from "../../apis/user.js";
import QRCode from "qrcodejs2";
import { shareIntegral } from "@/apis/integral";

export default {
  data() {
    return {
      agentVip: 0,
      show: false,
      agentCityCode: "",
      userId: "",
      count: 0,
      contactOwnerNum: 0,
      value: 5,
      username: "",
      swiperOption: {
        slidesPerView: 3,
        spaceBetween: 10,
        loop: true,
      },
      avatar: "",
      showAgentExpire: true,
    };
  },
  computed: {
    ...mapGetters(["role", "integral", "agent", "withdrawAmount"]),
  },
  created() {
    const _this = this;
    const userId = getUserId();
    _this.userId = userId;
    if (userId) {
      _this.$store.dispatch("manage/getInfo", { userId: userId });
      _this.getinfo();
      if (_session.get("agentExpire")) {
        _this.showAgentExpire = false;
      }
      _this.showDialog();
      //h5+功能接口需要调用此函数
      _this.$plusReady(() => {
        plus.share.getServices(function (e) {
          _this.shareData = e;
          for (var i in e) {
            if (e[i].id == "weixin") {
              _this.sharewx = e[i];
            }
          }
        });
      });
    } else {
      _this.$router.push({ path: "/login" });
    }
    // const secret = getSecret();
    // if (secret) {

    // }
  },
  methods: {
    showDialog() {
      if (_local.get("user").result.agent.tips != "" && this.showAgentExpire) {
        this.$dialog
          .confirm({
            title: "温馨提示",
            className: "leftpart",
            confirmButtonText: "立即购买",
            confirmButtonColor: "#45b7cb",
            cancelButtonText: "取消",
            message: _local.get("user").result.agent.tips,
            messageAlign: "left",
          })
          .then(() => {
            _session.set("agentExpire", 1);
            this.$router.push({ path: "/buyjoin" });
          })
          .catch(() => {
            _session.set("agentExpire", 1);
          });
      }
    },
    getCustomer() {
      this.$router.push("/CustomerSource");
    },
    goBuyAgent() {
      this.$router.push("/buyjoin");
    },
    jumptoZhi() {
      this.$router.push("/servicebuyzm");
    },
    goTui() {
      const _this = this;
      if (_local.get("role") == 1 || _local.get("role") == 5) {
        var msg = {
          type: "web",
          title: "Hi,这里有0中介费的直租好房！",
          content: `租房神器！房东直租没有中介费，价格比长租公寓便宜`,
          thumbs: ["https://image.nunbdc.net/image/152-152.png"],
          href: "https://html.nunbdc.net/share2.html",
          extra: { scene: "WXSceneSession" },
        };
      }
      if (_local.get("role") == 2 || _local.get("role") == 3) {
        var msg = {
          type: "web",
          title: "Hi,这里可以直买直租0中介费！",
          content: `租客多、买家多、快速交易、快速变现！省时省心更赚钱`,
          thumbs: ["https://image.nunbdc.net/image/152-152.png"],
          href: "https://html.nunbdc.net/fangyeShare2.html",
          extra: { scene: "WXSceneSession" },
        };
      }
      if (_local.get("role") == 4) {
        var msg = {
          type: "web",
          title: "兄弟，我在这里可以抢单抢红包！",
          content: `经纪人赚钱神器！全平台自由协作不分佣不扣佣，赚钱多结算快！`,
          thumbs: ["https://image.nunbdc.net/image/152-152.png"],
          href: "https://html.nunbdc.net/agent6.html",
          extra: { scene: "WXSceneSession" },
        };
      }
      _this.sharewx.send(
        msg,
        function () {
          if (_local.get("role") == 1 || _local.get("role") == 4) {
            _this.shareGetIntegral();
          }
          _this.$toast.success("分享成功");
        },
        function () {
          _this.$toast("分享失败");
        }
      );
    },
    shareGetIntegral() {
      const _this = this;
      shareIntegral({ type: 5 }).then((res) => {
        if (res.code === 200) {
          _this.$toast("分享成功，获得1积分");
        }
      });
    },
    getinfo() {
      getUserInfo({ userId: this.userId }).then((res) => {
        console.log(res);
        _local.set("user", JSON.stringify(res));
        this.count = res.result.takeLookNum;
        this.contactOwnerNum = res.result.contactOwnerNum;
        this.agentCityCode = res.result.agent.citycode;
        this.username = res.result.realname;
        this.avatar = res.result.avatar;
        this.agentVip = res.result.agent.vip;
      });
    },
    jumptoDai() {
      this.$router.push("/servicebuydk");
    },
    jumptointegral() {
      this.$router.push("/pointorder");
    },
    goMoney() {
      this.$router.push("/getmoney");
    },
    goCan() {
      const userId = getUserId();
      if (userId) {
        this.$store.dispatch("manage/getInfo", { userId: userId });
        this.$router.push("/Calendar");
      } else {
        this.$router.push({ path: "/login" });
      }
      const secret = getSecret();
      if (secret) {
        this.username = secret.username;
        this.avatar = secret.avatar;
      }
    },
    changerole() {
      this.$router.push({ path: "/rolechoose" });
    },
    tologin() {
      this.$router.push({ path: "/login" });
    },
    jumptomoney() {
      this.$router.push({ path: "/money" });
    },
    jumptoGetIntegral() {
      this.$router.push("/GetIntegral");
    },
    jumptocomplaint() {
      this.$router.push({ path: "/complaint" });
    },
    jumptotoday() {
      this.$router.push({ path: "/today" });
    },
    jumptopushhouse() {
      if (_local.get("role") == 1) {
        this.$router.push({ path: "/match", query: { isHistory: 1 } });
      } else if (_local.get("role") == 5) {
        this.$router.push({ path: "/buyseek" });
      } else {
        this.$router.push({ path: "/pushhouse" });
      }
    },
    jumptopushguest() {
      this.$router.push({ path: "/pushguest" });
    },
    jumptomyhouse() {
      this.$router.push({ path: "/myhouse" });
    },
    jumptomyownerhouse() {
      this.$router.push({ path: "/myownerhouse" });
    },
    jumptomybuyhouse() {
      if (_local.get("user").result.agent.vip == 2) {
        this.$router.push({ path: "/mybuyhouse" });
      } else {
        this.$router.push({ path: "/buyjoin" });
      }
    },
    jumptolist() {
      this.$router.push({ path: "/blacklist" });
    },
    jumptoset() {
      this.$router.push({ path: "/setting" });
    },
    jumptoserviceguarantee() {
      this.$router.push({ path: "/serviceguarantee" });
    },
    jumptomyagent() {
      this.$router.push({ path: "/myagent" });
    },
    jumptoserviceorderagent() {
      this.$router.push({ path: "/serviceorderagent" });
    },
    jumptoserviceorderbuy() {
      this.$router.push({ path: "/serviceorderbuy" });
    },
    jumptograborder() {
      // if (
      //     _local.get("city") === '北京市' ||
      //     _local.get("city") === '上海市' ||
      //     _local.get("city") === '广州市' ||
      //     _local.get("city") === '深圳市' ||
      //     _local.get("city") === '杭州市' ||
      //     _local.get("city") === '武汉市' ||
      //     _local.get("city") === '长沙市' ||
      //     _local.get("city") === '宁波市'
      //   ) {
      //     this.$dialog.alert({
      //       message: '当前城市暂未开放二手房交易服务',
      //       confirmButtonColor: '#45b7cb',
      //       theme: 'round-button'
      //     })}
      this.$router.push({
        path: "/graborder",
      });
      // else if (_local.get("cityCode") == this.agentCityCode) {
      //   this.$router.push({
      //     path: "/graborder",
      //   });
      // } else {
      //   this.$dialog
      //     .confirm({
      //       title: "温馨提示",
      //       className: "leftpart",
      //       confirmButtonText: "是",
      //       confirmButtonColor: "#45b7cb",
      //       cancelButtonText: "否",
      //       message:
      //         `当前城市并非是您注册所在地【${this.agentCityCode}】,是否立即切换`,
      //     })
      //     .then(() => {

      //     })
      //     .catch(() => {});
      // }
    },
    jumptoservicebuyzm() {
      this.$router.push({ path: "/servicebuyzm" });
    },
    jumptoservicebuydk() {
      this.$router.push({ path: "/servicebuydk" });
    },
    jumptoservicebuyjy() {
      this.$router.push({ path: "/servicebuyjy" });
    },
    jumptoservicebuyjr() {
      this.$router.push({ path: "/servicebuyjr" });
    },
    jumptoservicebuyjg() {
      this.$router.push({ path: "/servicebuyjg" });
    },
    jumptoservicebuylx() {
      this.$router.push({ path: "/servicebuylx" });
    },
    jumptogetmoney() {
      this.$router.push({ path: "/getmoney" });
    },
    tobuyindex() {
      this.$router.push({ path: "/buyindex" });
    },
    call() {
      this.$dialog
        .confirm({
          title: "暖暖客服",
          message: "服务时间:周一至周五09:00-18:00",
          messageAlign: "left",
        })
        .then(() => {
          window.location.href = "tel:400-000-7173";
        })
        .catch(() => {});
    },
    showque1() {
      this.$dialog
        .alert({
          message:
            "经纪人完成相关服务，买家对经纪人服务反馈评价后的24小时内，平台系统将自动为经纪人结算佣金。",
          messageAlign: "left",
          confirmButtonColor: "#45b7cb",
          theme: "round-button",
          messageAlign: "left",
        })
        .then(() => {});
    },
  },
};
</script>

<style lang="less" scoped>
.erwei {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.jingcard {
  width: 92vw;
  margin: auto;
  margin-top: -35px;
  background-color: #ffffff;
  box-shadow: 0px 0px 10px 5px #0a0b2f1e;
  border-radius: 10px;
  .top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-image: linear-gradient(to top, #222222, #54534e);
    padding: 15px 20px;
    border-radius: 10px 10px 0 0;
    & > div:nth-child(1) {
      & > div:nth-child(1) {
        color: #fcedd3;
        margin-bottom: 10px;
        font-size: 15px;
      }
      & > div:nth-child(2) {
        color: #e4e4e4;
        font-size: 18px;
        font-weight: bold;
        .van-icon {
          margin-left: 5px;
          vertical-align: baseline;
        }
      }
    }
    & > div:nth-child(2) {
      button:active {
        background-color: #ffe2b17f;
      }
      button {
        background-color: #ffe3b1;
        width: 69px;
        height: 28px;
        text-align: center;
        border-radius: 14px;
        color: #52514c;
        font-weight: bold;
        font-size: 15px;
        border: 0;
      }
    }
  }
  .bottom {
    display: flex;
    justify-content: space-between;
    margin: 20px 20px 10px;
    padding: 0 0 10px;
    .up {
      color: #d43b33;
      font-size: 20px;
      font-weight: bolder;
      margin-bottom: 10px;
      text-align: center;
    }
    .und {
      font-size: 12px;
      color: #524c4c;
    }
  }
}
@keyframes change {
  0% {
    font-size: 16px;
    font-weight: bold;
  }
  100% {
    font-size: 18px;
    font-weight: bold;
  }
}
.header {
  position: fixed;
  left: 0;
  top: 0;
  padding: 10px 15px;
  z-index: 10;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  font-size: 15px;
  color: #fff;
  .title {
    line-height: 25px;
    height: 25px;
    font-size: 18px;
    font-weight: bold;
  }
  .change {
    font-size: 13px;
    div {
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }
  }
}
.info {
  height: 295px;
  background: url("../../assets/mebg01.png") 0px 0px no-repeat;
  background-size: 100% 100%;
  box-sizing: border-box;
  padding: 50px 55px 0;
}
.cardmai {
  margin: 10px 15px;
  padding: 15px 25px;
  border-radius: 10px;
  background-color: #fff;
  font-size: 13px;
  box-shadow: 0px 0px 10px 5px #e0f3f7;
  margin-top: -35px;
  display: flex;
  justify-content: space-between;
  text-align: center;
  .icon {
    transform: translateY(30px);
  }
  .see {
    font-size: 14px;
    margin-bottom: 5px;
    div:nth-child(2) {
      margin-top: 10px;
      color: #d43b33;
      font-size: 25px;
      font-weight: bold;
    }
  }
  .out {
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
    .btn {
      transform: translateY(-12px);
      width: 85px;
      height: 33px;
      min-width: 85px;
      white-space: nowrap;
      background-color: #45b7cb;
      color: white;
      font-weight: 400;
      font-size: 15px;
    }
  }
  .moeny {
    color: #d43b33;
    font-size: 25px;
    font-weight: bold;
  }
  .moeny2 {
    color: #d43b33;
    font-size: 20px;
    font-weight: bold;
  }
  .tixian {
    font-size: 12px;
    border-radius: 15px;
    height: 30px;
    width: 70px;
    min-width: 70px;
    white-space: nowrap;
    background-color: #fff;
    border: 1px solid #45b7cb;
    color: #45b7cd;
  }
  .xbox {
    display: flex;
    justify-content: space-between;
    > div {
      width: 45%;
      margin-top: 15px;
    }
  }
  .more {
    color: #333;
    font-size: 16px;
    background-color: #eee;
    border-radius: 50%;
    margin-left: 5px;
    padding: 2px;
  }
  .say {
    display: flex;
    align-items: center;
    > .van-icon {
      font-size: 16px;
      margin-left: 5px;
    }
  }
}
.card {
  margin: 10px 15px;
  padding: 15px 25px;
  border-radius: 10px;
  background-color: #fff;
  font-size: 13px;
  box-shadow: 0px 0px 10px 5px #e0f3f7;
  margin-top: -35px;
  .see {
    font-size: 14px;
    margin-bottom: 5px;
    .icon {
      transform: translateY(30px);
      margin-left: 10px;
    }
  }
  .out {
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
    .btn {
      transform: translateY(-12px);
      width: 85px;
      height: 33px;
      min-width: 85px;
      white-space: nowrap;
      background-color: #45b7cb;
      color: white;
      font-weight: 400;
      font-size: 15px;
    }
  }
  .moeny {
    color: #d43b33;
    font-size: 25px;
    font-weight: bold;
  }
  .moeny2 {
    color: #d43b33;
    font-size: 20px;
    font-weight: bold;
  }
  .tixian:active {
    background-color: #ddd;
  }
  .tixian {
    font-size: 12px;
    border-radius: 15px;
    height: 30px;
    width: 70px;
    min-width: 70px;
    white-space: nowrap;
    background-color: #fff;
    border: 1px solid #45b7cb;
    color: #45b7cd;
  }
  .xbox {
    display: flex;
    justify-content: space-between;
    > div {
      width: 45%;
      margin-top: 15px;
    }
  }
  .more {
    color: #333;
    font-size: 16px;
    background-color: #eee;
    border-radius: 50%;
    margin-left: 5px;
    padding: 2px;
  }
  .say {
    display: flex;
    align-items: center;
    > .van-icon {
      font-size: 16px;
      margin-left: 5px;
    }
  }
}
.tool {
  border-radius: 10px;
  margin: 20px 15px 25px;
  box-shadow: 0px 1px 10px 5px #eee;
  .tip {
    padding: 15px;
    font-size: 16px;
    color: #333;
    font-weight: bold;
  }
  .cell {
    padding: 15px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #f1f1f1;
    color: #333;
    font-size: 13px;
    font-weight: bold;
    img {
      margin-right: 10px;
      width: 14px;
      height: 14px;
    }
  }
}
.unlogin {
  .info {
    height: 255px;
    padding: 65px 55px 0;
    text-align: center;
    .lbox {
      margin: 0 auto;
      width: 60px;
      height: 60px;
      border-radius: 50%;
      background-color: #fff;
      border: 4px solid #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      > img {
        width: 50px;
        height: 50px;
      }
    }
    .bbox {
      text-align: center;
      font-size: 20px;
      color: #fff;
      margin-top: 5px;
      font-weight: bold;
    }
  }
  .tool {
    margin-top: -40px;
  }
  .tool2 {
    margin-top: 10px;
  }
}
.agent {
  .info {
    display: flex;
    justify-content: space-between;
    .leftbox {
      position: relative;
      div {
        &:first-child {
          width: 60px;
          height: 60px;
          border: 2px solid #fff;
          border-radius: 50%;
          background-color: #fff;
          display: flex;
          justify-content: center;
          align-items: center;
          > img {
            border-radius: 50%;
            width: 55px;
            height: 55px;
          }
        }
        &:nth-child(2) {
          text-align: center;
          font-size: 16px;
          color: #fff;
          margin-top: 7px;
        }
        &:nth-child(3) {
          margin-top: 3px;
          position: relative;
          text-align: center;
          > img {
            position: absolute;
            width: 22px;
            height: 22px;
            border-radius: 50%;
            left: -5px;
            top: -2px;
          }
          span {
            display: inline-block;
            padding: 0px 4px 1px 15px;
            font-size: 12px;
            background-color: #fff;
            color: #45b7cb;
            border-radius: 10px;
          }
        }
      }
      .vip {
        width: 20px;
        position: absolute;
        top: 0px;
        right: 0px;
      }
    }
    .rightbox {
      padding-top: 25px;
      > div {
        color: #fff;
        display: flex;
        align-items: center;
        font-size: 12px;
        margin-bottom: 8px;
      }
    }
  }
  .getorderimg {
    margin-top: 10px;
    box-sizing: border-box;
    padding: 0 15px;
    width: 100%;
  }
  .getorder {
    position: relative;
  }
  .li {
    position: absolute;
    bottom: 4.5vh;
    right: 11.2vw;
    color: #ff002e;
    font-weight: bold;
    animation: change 1s infinite linear;
    transition: 2s;
  }
  .tool {
    margin-top: 10px;
  }
}
.renterandbuy {
  .info {
    height: 255px;
    padding: 65px 55px 0;
    .lbox {
      display: flex;
      justify-content: center;
      align-items: center;
      > div {
        &:nth-child(2) {
          width: 60px;
          height: 60px;
          border-radius: 50%;
          background-color: #fff;
          border: 2px solid #fff;
          display: flex;
          justify-content: center;
          align-items: center;
          > img {
            width: 55px;
            height: 55px;
            border-radius: 50%;
          }
        }
        &:last-child {
          padding-left: 20px;
          margin-top: 3px;
          position: relative;
          text-align: center;
          > img {
            position: absolute;
            width: 22px;
            height: 22px;
            border-radius: 50%;
            left: 11px;
            top: -2px;
          }
          span {
            display: inline-block;
            padding: 0px 4px 1px 15px;
            font-size: 12px;
            background-color: #fff;
            color: #45b7cb;
            border-radius: 10px;
          }
        }
      }
    }
    .bbox {
      text-align: center;
      font-size: 16px;
      color: #fff;
      margin-top: 5px;
    }
  }
  .tobuyserve {
    margin: 10px 15px 0 15px;
    height: 160px;
    display: flex;
    align-items: center;
    .item {
      position: absolute;
      bottom: 0;
      margin-right: 9px;
      width: 105px;
      height: 135px;
      border: 1px solid #f1f1f1;
      text-align: center;
      border-radius: 5px;
      > div {
        &:first-child {
          color: #fff;
          font-size: 15px;
          padding: 5px 0;
          border-radius: 5px 5px 0 0;
        }
        &:nth-child(2) {
          color: #666;
          font-size: 12px;
          padding-top: 12px;
          padding-left: 16px;
          text-align: left;
        }
        &:nth-child(3) {
          text-align: left;
          font-size: 12px;
          color: #666;
          padding-left: 16px;
          padding-bottom: 15px;
        }
        &:nth-child(4) {
          margin: 0 auto;
          width: 75px;
          height: 28px;
          font-size: 16px;
          color: #fff;
          line-height: 28px;
          border-radius: 15px;
        }
      }
    }
    .swiper {
      width: 100%;
      height: 150px;
      .swiper-slide {
        position: relative;
      }
      .swiper-slide-next {
        .item {
          height: 145px;
          div {
            &:first-child {
              border-radius: 5px 5px 0 0;
              padding: 10px 0;
            }
          }
        }
      }
    }
  }
  .buyserve {
    border-top: 1px solid #f1f1f1;
    margin-top: 10px;
    padding-top: 10px;
    display: flex;
    justify-content: space-between;
    .leftbox {
      .chone {
        margin-top: 5px;
        font-size: 14px;
        font-weight: bold;
        color: #333 !important;
        span {
          font-size: 18px;
          color: #d43b33;
        }
      }
    }
    .rightbox {
      text-align: center;
      font-size: 14px;
      .buy {
        color: #45b7cb;
        width: 70px;
        height: 30px;
        line-height: 30px;
        border-radius: 15px;
      }
      .forback {
        width: 90px;
        height: 34px;
        line-height: 34px;
        border: 1px solid #45b7cb;
        color: #666;
        border-radius: 15px;
      }
    }
  }
}
.rentowner,
.owner {
  .info {
    height: 255px;
    padding: 65px 55px 0;
    .lbox {
      display: flex;
      justify-content: center;
      align-items: center;
      > div {
        &:nth-child(2) {
          width: 60px;
          height: 60px;
          border-radius: 50%;
          background-color: #fff;
          border: 2px solid #fff;
          display: flex;
          justify-content: center;
          align-items: center;
          > img {
            width: 55px;
            height: 55px;
            border-radius: 50%;
          }
        }
        &:last-child {
          padding-left: 20px;
          margin-top: 3px;
          position: relative;
          text-align: center;
          > img {
            position: absolute;
            width: 22px;
            height: 22px;
            border-radius: 50%;
            left: 11px;
            top: -2px;
          }
          span {
            display: inline-block;
            padding: 0px 4px 1px 15px;
            font-size: 12px;
            background-color: #fff;
            color: #45b7cb;
            border-radius: 10px;
          }
        }
      }
    }
    .bbox {
      text-align: center;
      font-size: 16px;
      color: #fff;
      margin-top: 5px;
    }
  }
}
</style>
